<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>移动端性能优化</title>
  </head>

  <body>
    <h1>移动端性能优化</h1>
    <ol>
      <li>尽量使用css3动画，开启硬件加速</li>
      <li>适当使用touch时间代替click时间</li>
      <li>避免使用css3渐变阴影效果</li>
      <li>可以用transform: translateZ(0) 来开启硬件加速</li>
      <li>不滥用float。float在渲染时计算量比较大，尽量减少使用</li>
      <li>不滥用web字体。web字体需要下载，解析，重绘当前页面</li>
      <li>合理使用requestAnimationFrame动画代替setTimeout</li>
      <li>
        css中的属性（css3 transitions、css3 3D
        transforms、opacity、webGL、video）会触发GUP渲染，耗电
      </li>
    </ol>
  </body>
</html>
